<template>
 <!-- <div id="login" v-title data-title="CRM登录">
    <el-form :model="emp" label-position="right" label-width="90px" :rules="loginRule">
      <el-form-item label="用户名">
        <el-input v-model="emp.empName" id="username" type="text" placeholder="请输入账号"
          style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="emp.empPwd" id="password" placeholder="登录密码"  style="width: 250px"
          show-password></el-input>
      </el-form-item>
      &lt;!&ndash; <el-form-item prop="verifyCode" class="verifyCodeItemCss">
        <el-input class="verify_css" placeholder="请输入4位验证码" v-model="emp.verifyCode" @keyup.enter.native="login('emp')"></el-input>
        <div id="v_container"></div>
      </el-form-item> &ndash;&gt;
    </el-form>
    <div style="margin-left: 40px">
      <el-button @click="login" type="primary" class="el-button–primary">登 录</el-button>
    </div>
    <div class="reg-bar">
      <router-link class="reg" :to="{path:'reg'}">立即注册</router-link>
      <router-link class="forget" :to="{path:'changePwd'}" >忘记密码</router-link>
    </div> &ndash;&gt;
  </div>&ndash;&gt;-->
  <div class="main-w3layouts wrapper">
    <div class="main-agileinfo">
      <div class="agileits-top">
        <div style="text-align: center;padding: 30px 0 10px 0">
          <img style="vertical-align: middle;padding:0 20px;width: 250px" alt="Vue logo" src="../assets/xhb2.png">
        </div>
        <el-form :model="emp" name="myForm" label-position="right" label-width="90px" >
          <input class="text text-style" type="text" v-model="emp.empName" name="empName" placeholder="姓名" required="true"/>
          <input class="text text-style" type="password" v-model="emp.empPwd" name="password" placeholder="密码" required="true"/>
        </el-form>
        <!-- <div class="wthree-text">
          <ul style="font-size: 16px">
            <li>
              <label class="anim">
                <input type="checkbox" class="checkbox" required="">
                <span> 记住 ?</span>
              </label>
            </li>
          </ul>
          <div class="clear"> </div>
        </div> -->
        <input @click="login" type="submit" value="登录"/>
      </div>
    </div>
    <ul class="w3lsg-bubbles">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>

export default {
  data () {
    return {
      emp: {
        empName: '',
        empPwd: ''
      }
    }
  },
  methods: {
    async login () {
      var x = document.forms['myForm']['empName'].value
      var y = document.forms['myForm']['password'].value
      if (x === null || x === '') {
        this.$message({
          message: '请输入姓名',
          type: 'info'
        })
        return false
      } else if (y === null || y === '') {
        this.$message({
          message: '请输入密码',
          type: 'info'
        })
        return false
      } else {
        this.$axios.post('http://localhost:8088/login',
          this.qs.stringify(this.emp))
          .then(v => {
            if (v.data === 'success') {
              // 跳转界面
              this.$router.push('/workbench')
              window.removeEventListener('keydown', this.handleKeyDown, true) // 请求成功移除键盘按下事件
            } else if (v.data.isTakeOn === '否') {
              alert('您已离职！拒绝登录！')
            } else {
              alert('用户名密码错误')
            }
          })
          .catch()
      }
    },
    handleKeyDown (e) {
      let key = null
      if (window.event === undefined) {
        key = e.keyCode
      } else {
        key = window.event.keyCode
      }
      // 按下enter键  触发login
      if (key === 13) {
        this.login()
      }
    }
  },
  created () {
    window.addEventListener('keydown', this.handleKeyDown, true) // 开启监听键盘按下事件
  }
}
</script>

<style scoped>
  #login {
    border: 2px solid rgb(33, 92, 160);
    padding-top: 50px;
    padding-bottom: 50px;
    border-radius: 10px;
    width: 400px;
    margin-top: 170px;
    margin-left: 400px;
  }
  #login .reg-bar {
    width: 360px;
    margin: 20px auto 0;
    font-size: 14px;
    overflow: hidden;
  }
  #login .reg-bar a {
    color: black;
    text-decoration: none;
  }

  #login .reg-bar a:hover {
    text-decoration: underline;
  }

  #login .reg-bar .reg {
    float: left;
  }

  .forget {
    float: right;
  }

  .el-button–primary {
    color: #fff;
    background-color: rgb(33, 92, 160);
    border-color: rgb(33, 92, 160);
    width: 300px
  }
</style>
